{extend name="public/base"}

{block name="title"}
绑定帐号登录
{/block}

{block name="style"}
{css href="/static/wechat/css/login.css" /}
<style>
    .code_login {
        display: none;
    }
</style>
{/block}

{block name="body"}
<div class="pageControl login">
    <div class="msui_nav msui_navTop">
        <h1 class="msui_navTop-title">绑定帐号登录</h1>
        <a href="{:url('register')}" class="msui_navTop-login">注册</a>
    </div>
    <div class="logo">
        <img src="/static/wechat/images/logo_03.png">
    </div>
    <form action="{:url('login')}" method="post" id="form"  class="login_form">
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">+86<i class="micon-in"></i></label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="number" name="phone"  placeholder="请输入手机号码">
                </div>
            </div>
            <section class="password_login">
                <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">密码</label></div>
                    <div class="weui-cell__bd">
                        <input class="weui-input" type="password" name="password"  placeholder="请输入密码">
                    </div>
                </div>
            </section>
            <section class="code_login">
                <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
                    <div class="weui-cell__bd">
                        <input class="weui-input" type="number" name="code" placeholder="请输入验证码">
                    </div>
                    <div class="weui-cell_ft">
                        <button class="weui_cell-verify js-verify cl-orange" type="button" >获取验证码</button>
                    </div>
                </div>
            </section>
        </div>
        <div class="msui_button">
            <div class="msui_button-hd">
                <p class="cl-orange referrer"></p>
            </div>
            <div class="msui_button-bd">
                <a class="msui_button-content member_form">登录</a>
            </div>
            <section class="password_login">
                <div class="msui_button-ft">
                    <a href="javascript:;" class="code_login_btn">验证码登录</a>
                    <a href="{:url('reset_psd')}">忘记密码</a>
                </div>
            </section>
            <section class="code_login">
                <div class="msui_button-ft">
                    <a href="javascript:;" class="password_login_btn">密码登录</a>
                    <a href="javascript:;"> </a>
                </div>
            </section>
        </div>
        <input type="hidden" name="type" value="1">
    </form>
</div>

<!-- loading toast -->
<div id="loadingToast" style="display:none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast" style="opacity: 1; visibility: visible;">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">加载中...</p>
    </div>
</div>

{/block}

{block name="javascript"}
{js href="/static/wechat/js/login_form.js" /}
<script>
    $(function () {
        $(".code_login_btn").click(function () {
            $(".code_login").show();
            $(".password_login").hide();
            $("input[name='type']").val(2);
            $("input[name='password']").val('');
        });

        $(".password_login_btn").click(function () {
            $(".password_login").show();
            $(".code_login").hide();
            $("input[name='type']").val(1);
            $("input[name='code']").val('');
        });
    });
</script>
{/block}